<template>
    <div class="addpage">
        <van-nav-bar title="新增页面" left-arrow @click-left="onClickLeft" />

        <div class="inputbox">
            <input type="text" placeholder="输入任务名称" v-model="inputText">
        </div>
        <button @click="add">新增</button>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { ref } from 'vue'
import { useTasklistStore } from '../stores/tasklist';

var store = useTasklistStore()
var $router = useRouter();//获取路由管理对象
var inputText = ref('')
var { tasklist } = ref([])


var add = () => {

    store.addTask(inputText.value)//调用仓库中的方法addTask,新增任务
    inputText.value = '';
    $router.push('/index');//调用push函数 跳路由
}
var onClickLeft = () => {
    $router.push('/index')
}

</script>

<style scoped>
* {
    padding: 0;
    margin: 0;
}

.addpage {
    box-sizing: border-box;
    padding: 0 10px;
}

.inputbox {
    width: 100%;
    padding: 10px 0;
}

input {
    width: 100%;
    line-height: 40px;
    outline: none;
    border: 1px solid lightgrey;
}

button {
    display: inline-block;
    width: 100%;
    line-height: 40px;
    color: cornflowerblue;
    border: 1px solid cornflowerblue;
    background-color: white;
}
</style>